<%@page import="jpa.entities.Revision"%>
<%@page import="jpa.entities.Item"%>
<%@page import="java.util.ArrayList"%>
<%@page import="jpa.entities.Task"%>
<%@page import="jpa.entities.Employee"%>
<%@page import="jpa.entities.Project"%>
<jsp:useBean id="user" class="jsp.classes.Session" scope="session"/>
<%
    String id = request.getParameter("pid");
    Project project = id == null ? null : user.findProjectById(Long.parseLong(id));
    String sub = request.getParameter("sub");
    String action = request.getParameter("action");
    String breadCrumbs = "";
    if (sub != null) {
        if (action != null) {
            breadCrumbs = "> " + sub + " > " + action;
        } else {
            breadCrumbs = "> " + sub;
        }
    }
%>
<script type="text/javascript">
    
    function ArchiveProject()
    {   
        $.ajax({
            type: "post",
            url: "http://localhost:8080/Baalzebub/archiveproject",
            data: { pid: <%= id%>},
            success: function (data, textStatus, jqXHR) {
                if(data == "true")
                {
                    $('#projectPane').load('projects.jsp?sub=settings&action=archive&pid=<%= id%>');
                    
                }
                else
                {
                    alert("An error has occured.");
                }
            },
            error: function () {
                $("#state").html("Please fill in all the required fields!");
            }
        });
    }
    
    function addEmployee()
    {
        var str = "";
        $("#allEmployees option:selected").each(function () {
            str += $(this).val();
        });
        
        
        $.ajax({
            type: "post",
            url: "http://localhost:8080/Baalzebub/adduser",
            data: { id: str, pid: <%= id%>},
            success: function (data, textStatus, jqXHR) {
                if(data == "true")
                {
                    $('#projectPane').load('projects.jsp?sub=settings&action=members&pid=<%= id%>');
                    
                }
                else
                {
                    alert("An error has occured.");
                }
            },
            error: function () {
                $("#state").html("Please fill in all the required fields!");
            }
        });
    }
    
    function removeEmployee()
    {
        var str = "";
        $("#currentEmployees option:selected").each(function () {
            str += $(this).val();
        });
        
        
        $.ajax({
            type: "post",
            url: "http://localhost:8080/Baalzebub/removeuser",
            data: { id: str, pid: <%= id%>},
            success: function (data, textStatus, jqXHR) {
                if(data == "true")
                {
                    $('#projectPane').load('projects.jsp?sub=settings&action=members&pid=<%= id%>');
                    
                }
                else
                {
                    alert("An error has occured.");
                }
            },
            error: function () {
                $("#state").html("Please fill in all the required fields!");
            }
        });
    }

    function newProject()
    {   
        
        var stateMessage = "";
        
        var data = $("#newproject").serialize();
        
        $.ajax({
            type: "post",
            url: "http://localhost:8080/Baalzebub/newproject",
            data: data,
            success: function (data, textStatus, jqXHR) {
                if(data == "true")
                {
                    $("#state").html("A new project is made");
                    //alert("oke");
                }
                else
                {
                    $("#state").html("An error has occurred");
                    alert("nee");
                }
            },
            error: function () {
                $("#state").html("Please fill in all the required fields!");
            }
        });
        
    
        
    }
    
</script>

<p class="Title" id="Title">Projects <%= breadCrumbs%></p>
<%if (sub == null) {%>
<div class="projects">
    <a href="javascript:$('#projectPane').load('projects.jsp?sub=newProject')" class="CreateGroupButton"><div class="CreateGroupButton"><p class="okText">New Project</p></div></a>
    <a id="tasksLink" class="CreateGroupButton" style="display:none"><div class="CreateGroupButton"><p class="okText">Tasks</p></div></a>
    <a id="settingsLink" class="CreateGroupButton" style="display:none"><div class="CreateGroupButton"><p class="okText">Settings</p></div></a>
    <a href="" id="pdfLink" class="CreateGroupButton" style="display:none"><div class="CreateGroupButton"><p class="okText">Pdf</p></div></a>

    <div class="projectListDiv">
        <ul class="projectList" onChange="showSelectedProject()"><%
            int i = 0;
            for (Project p : user.getEmployee().getProjects()) {%>
            <li id="project<%=p.getId()%>">
                <a href="javascript:showItems(<%=p.getId()%>)" id="project_<%=p.getId()%>"><%=p.getTitle()%></a>
            </li><%}%>
        </ul>

    </div>

</div>
<div class="projectDetails">
    <p class="Title2">Files</p>
    <div id="fileTree" class="fileTree"><p style="margin:0;padding:0;margin-left:10px;position: relative;float: left">Klik links op een project om de bestanden te zien.</p></div>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".expandable").live("mousedown", function(){
                function hide(e,b){
                    if(e.attr("class") == "expandable"){
                        var l = e.next().next();
                        if(b){
                            if(l.attr("class") == "item"){
                                l.children().each(function () {
                                    hide($(this),true);
                                });
                            }
                            e.html("+");
                            l.css("display","none");
                        }else{
                            e.html("-");
                            l.css("display","block");
                        }
                    }
                }
                hide($(this),$(this).next().next().css("display") != "none");
            });
        });
    </script>
</div>
<div id="fileInfo" class="fileInfo">
</div>
<%} else if (sub != null && sub.equalsIgnoreCase("settings")) {%>
<div class="projects">

    <a href="javascript: updatePagina('projects.jsp')" class="CreateBackButton"><div class="CreateBackButton"><p class="okText">Back</p></div></a>
    <a href="javascript: $('#projectPane').load('projects.jsp?sub=settings&pid=<%=id%>');" class="CreateGroupButton"><div class="CreateGroupButton"><p class="okText">Global</p></div></a>
    <a href="javascript: $('#projectPane').load('projects.jsp?sub=settings&action=members&pid=<%=id%>');" class="CreateGroupButton"><div class="CreateGroupButton"><p class="okText">Members</p></div></a>
    <a href="javascript: $('#projectPane').load('projects.jsp?sub=settings&action=archive&pid=<%=id%>');" class="CreateGroupButton"><div class="CreateGroupButton"><p class="okText">Archive</p></div></a>
</div>
<%      if (action == null) {%>
<div class="membersPage">
    Selecteer links een optie uit het menu.


</div>
<%      } else if (action.equalsIgnoreCase("members")) {%>
<div class="membersPage">
    <p class="membersTitle">Members</p>
    <select multiple="true" class="memberListbox" id="currentEmployees">
        <%
            for (Employee e : project.getMembers()) {
                out.print("<option value=\"" + e.getId() + "\">" + e.getUserName() + "</option>");
            }
        %>
    </select>
    <a href="javascript: removeEmployee()" class="saveButton" style="float:right;"><div class="saveButton"><p class="centerText">REMOVE</p></div></a>
</div>
<div class="membersPage">
    <p class="membersTitle">Employees</p>
    <select multiple="true" class="memberListbox" id="allEmployees">
        <%
            for (Employee e : user.getJPAConnection().getAllUsers()) {
                out.print("<option value=\"" + e.getId() + "\">" + e.getUserName() + "</option>");
            }
        %>
    </select>
    <a href="javascript: addEmployee()" class="saveButton" style="float:right;"><div class="saveButton"><p class="centerText">ADD</p></div></a>
</div>
<%      } else if (action.equalsIgnoreCase("archive")) {%>
<div class="addUserSettings">



    <%
        out.println("Version: "+project.getVersion());



    %>


    <br/><br/><br/>
    <a href="javascript: ArchiveProject()" class="saveButton"><div class="saveButton"><p class="centerText">ARCHIVE</p></div></a>
</div>
<div class="addUserSettings">
    <p class="membersTitle">Archived Projects</p>
    <select multiple="true" class="memberListbox">
        <option>0.0.1</option>
        <option>0.0.2</option>
        <option>0.0.3</option>
        <option>0.0.4</option>
    </select>
    <a href="#" class="saveButton"><div class="saveButton"><p class="okText">RECOVER</p></div></a>
</div>
<%      }
} else if (sub != null && sub.equalsIgnoreCase("newProject")) {
%>
<div class="projects">
    <a href="javascript: $('#projectPane').load('projects.jsp')" class="CreateBackButton"><div class="CreateBackButton"><p class="okText">Back</p></div></a>
</div>
<div class="addUserSettings">
    <b>Add new project</b>
    <form id="newproject">
        <table>
            <tbody>
                <tr>
                    <td>Name:</td>
                    <td><input class="inputField" type="text" name="projectName" value="" /></td>
                </tr>
                <tr>
                    <td>Descr:</td>
                    <td><input class="inputField" type="date" name="deadline" value="YYYY-MM-DD" /></td>
                </tr>
                <tr>
                    <td>Owner:</td>
                    <td>
                        <select name="owner" id="testje">
                            <%
                                String selected = "";
                                for (Employee emp : user.getJPAConnection().getAllUsers()) {

                                    out.print("<option value=\"" + emp.getId() + "\">" + emp.getUserName() + "</option>");
                                }
                            %>

                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2"><a href="javascript: newProject()" class="saveButton"><div class="saveButton"><p class="okText">SAVE</p></div></a></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
<%} else if (sub != null && sub.equalsIgnoreCase("tasks")) {%>
<div class="projects">
    <a href="javascript: $('#projectPane').load('projects.jsp')" class="CreateBackButton"><div class="CreateBackButton"><p class="okText">Back</p></div></a>
</div>
<div class="addUserSettings">
    <p class="membersTitle">To Do</p><script type="text/javascript">
        $("select").change(function () {
            $("select option:selected").each(function () {
                $("#taskDetails").load("taskDetails.jsp?id="+$(this).val());
            });
        }).trigger('change');
    </script>
    <select multiple="true" class="taskListbox">
        <%
            ArrayList<Task> finished = new ArrayList<Task>();
            for (Task t : user.getEmployee().getTasks()) {
                if (t.getProject() == project) {
                    if (t.getState().startsWith("Finished")) {
                        finished.add(t);
                    } else {
                        out.print("<option value=\"" + t.getId() + "\" >" + t.getName() + "</option>");
                    }
                }
            }
        %>
    </select>
    <p class="membersTitle">Done</p>
    <select multiple="true" class="taskListbox">
        <%
            for (Task t : finished) {
                out.print("<option value=\"" + t.getId() + "\" >" + t.getName() + "</option>");
            }
        %>
    </select>
</div>
<div class="addUserSettings" id="taskDetails"></div>

<%} else if (sub != null && sub.equalsIgnoreCase("pdf")) {%>

<div class="projects">
    <a href="javascript: $('#projectPane').load('projects.jsp')" class="CreateBackButton"><div class="CreateBackButton"><p class="okText">Back</p></div></a>
</div>

<form method="post" action="pdf" name="profile" id="profileForm" target="_blank">
    <input type="hidden" name="p" value="<%=project.getId()%>" />
    <div class="addUserSettings">
        <dl>
            <%
                for (Item i : user.listOfItems(project)) {
                    out.print("<dt>" + i.getTitle() + "<dl>");
                    for (Revision r : i.getRevisions()) {
                        out.print("<dt><input type=\"checkbox\" name=\"r\" value=\"" + r.getId() + "\" />" + r.getVersion() + ": " + r.getFilename() + "</dt>");
                    }
                    out.print("</dl></dt>");
                }
            %>
        </dl>
    </div>

    <div class="addUserSettings">
        <input type="submit" value="Generate pdf" />


    </div>
</form>

<%}%>